<template>
  <div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>
    <card>
      <div style="display: flex; align-items: center; height: 40px">
        <p>留言回复审核方式：</p>
        <i-switch
          v-model="AutoVerifyFlag"
          size="large"
          @on-change="changeAutoVerify"
        >
          <span slot="open">自动</span>
          <span slot="close">手动</span>
        </i-switch>
        <Tooltip max-width="300" placement="top-start">
          <Icon
            style="margin-left: 10px; margin-top: 0px"
            size="20"
            type="ios-help-circle-outline"
          />
          <div slot="content">
            <p>自动审核是系统自动校验留言是否合规</p>
            <p>手动审核是管理员手动切换留言状态</p>
          </div>
        </Tooltip>
      </div>

      <Table
        class="table"
        :loading="loading1"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
      show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
    </card>
    <Modal title="回复留言" v-model="reply">
      <Input placeholder="请输入回复留言内容" v-model="replycontext"></Input>
      <div slot="footer">
        <Button type="warning" class="Button" @click="reply = false"
          >关闭</Button
        >
        <Button
          type="primary"
          class="Button"
          @click="replysubmit"
          :loading="loading2"
          >提交</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading1: false,
      loading2: false,

      museumId: "",
      museumList: [],
      reply: false,
      replycontext: "",
      data: [],
      current: 1,
      total: 0,

      AutoVerifyFlag: false,

      columns: [
        { title: "微信昵称", key: "nickName", align: "center" },
        {
          title: "微信头像",
          key: "headImg",
          align: "center",
          render: (h, params) => {
            return h("img", {
              style: {
                width: "60px",
                marginTop: "6px",
                "border-radius": "50%",
              },
              attrs: {
                src: params.row.headImg,
              },
            });
          },
        },
        { title: "留言内容", key: "content", align: "center" },
        { title: "发布时间", key: "gmtCreate", align: "center" },
        {
          title: "操作",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    disabled: params.row.states == 2,
                    loading: this.loading2,
                  },
                  on: {
                    click: () => {
                      this.verifyMessageBoard(params, 2);
                    },
                  },
                },
                "通过"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    disabled: params.row.states == 3,
                    loading: this.loading2,
                  },
                  style: {
                    margin: "0 10px",
                  },
                  on: {
                    click: () => {
                      this.verifyMessageBoard(params, 3);
                    },
                  },
                },
                "拒绝"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                  },
                  on: {
                    click: () => {
                      this.del(params);
                    },
                  },
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                  },
                  on: {
                    click: () => {
                      this.replyed(params);
                    },
                  },
                },
                "回复"
              ),
            ]);
          },
        },
      ],
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.getMessageBoardList();
      this.getAppMuseumAutoVerifyFlag();
    }
  },
  methods: {
    // 获取自动审核留言开关
    getAppMuseumAutoVerifyFlag() {
      this.$http(
        "/stage/reservation/getAppMuseumAutoVerifyFlag",
        {
          appMuseumId: this.museumId,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.AutoVerifyFlag = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    changeAutoVerify() {
      this.$http(
        "/stage/reservation/enableOrDisableAutoVerifyFlag",
        {
          appMuseumId: this.museumId,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success("切换成功");
            this.getAppMuseumAutoVerifyFlag();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    verifyMessageBoard(params, num) {
      this.loading2 = true;
      this.$http(
        "/stage/reservation/verifyMessageBoard",
        {
          id: params.row.id,
          states: num,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.getMessageBoardList();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        }
      );
    },
    getMessageBoardList() {
      this.loading1 = true;
      this.$http(
        "/stage/reservation/getMessageBoardList",
        {
          museumId: this.museumId,
          current: this.current,
          size: 10,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getMessageBoardList();
          this.getAppMuseumAutoVerifyFlag();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    changePage(data) {
      this.current = data;
      this.getMessageBoardList();
    },
    change() {
      this.current = 1;
      this.getMessageBoardList();
      this.getAppMuseumAutoVerifyFlag();
    },
    del(params) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要删除此留言吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/reservation/deleteMessageBoard",
            {
              id: params.row.id,
            },
            "get",
            (res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除留言成功");
                this.current = 1;
                this.getMessageBoardList();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {},
      });
    },
    replyed(params) {
      var that = this;
      console.log(params);
      console.log(params.row);
      that.rowid = params.row.id;
      that.reply = true;
    },
    replysubmit() {
      if(this.replycontext==''){
         this.$Message.error("回复留言不能为空");
return 
      }
      this.$http(
        "/stage/reservation/replyMessage",
        {
          content: this.replycontext,
          id: this.rowid,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
          this.$Message.success('回复成功');
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
      this.reply = false;
    },
  },
};
</script>

<style scoped>
</style>
